<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix">
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
   $(function(){
	   $("#pageId")
	   .load("doPageUI",doGetObjects);
	   //查询和修改按钮事件注册
	   $(".input-group-btn")
	   .on("click",".btn-search",doQueryObjects)
	   .on("click",".btn-delete",doDeleteObjects)
	   //全选checkbox对象事件注册
	   //change函数一般用于状态变化事件注册
	   $("#checkAll")
	   .change(doChangeTBodyCheckBoxState);
	   //tbody中checkbox事件注册
	   $("#tbodyId")
	   .on("change",".cBox",
			   doChangeTHeadCheckBoxState);
   })
   //修改thead中checkbox对象的状态
   function doChangeTHeadCheckBoxState(){
	   //1.定义一个初始状态值.
	   var flag=true;
	   //2.获取tbody中所有checkbox对象的状态值,
	   //然后进行逻辑与操作.
	   $("#tbodyId input[type='checkbox']")
	   .each(function(){
		   flag=flag&&$(this).prop("checked");
	   })
	   //3.更新thead中checkbox的状态值
	   $("#checkAll").prop("checked",flag);
   }
   
   
   //修改tbody中checkbox对应的状态
   function doChangeTBodyCheckBoxState(){
	   //1.获取thead中全选checkbox对象的状态
	   var flag=$(this).prop("checked");
	   //2.设置tbody中checkbox对象的状态
	   $("#tbodyId input[type='checkbox']")
	   .prop("checked",flag);
   }
   
   //获取选中记录的id值
   function doGetCheckedIds(){
	   //1.定义一个数组,用户存储获取的记录id值
	   var idArray=[];//new Array();
	   //2.获取tbody中的所有checkbox对象
	   $("#tbodyId input[type='checkbox']")
	   //3.迭代所有checkbox对象获取选中值
	   //each函数为一个迭代函数,当发现元素会执行callback
	   .each(function(){//callback
		   //$(this)在这里代表input类型为checkbox对象
		   //prop("checked")表示获取checked属性的值
		   if($(this).prop("checked")){
			  //存储checkbox对应的value属性值.
			  idArray.push($(this).val());
		   }
	   })
	   //4.返回选中记录的id值
	   return idArray;
   }
   //处理删除按钮业务
   function doDeleteObjects(){
	  //1.获取页面上用户选中的记录id,并进行判定.
	  var idArray=doGetCheckedIds();
	  if(idArray.length==0){
		  alert("请先选中");
		  return;
	  }
	  //2.给出确认删除提示信息.
	  //confirm为window对象的一个函数
	  if(!confirm("确认删除吗?"))return;
	  //3.发送异步请求,执行删除操作
	  //3.1定义请求参数
	  var params={"ids":idArray.toString()}
	  //3.2定义请求的url
	  var url="log/doDeleteObjects";
	  //3.3发送异步请求,执行删除操作
	  //post(url,[params],[callback])为jquery中的一个post请求的异步函数
	  $.post(url,params,function(result){
		  if(result.state==1){
			  alert(result.message);
			  //doGetObjects();
			  doRefreshPageAfterDelete();
		  }else{
			  alert(result.message);
		  }
	  })
   }
   //删除完成以后刷新页面
   function doRefreshPageAfterDelete(){
	  //1.获取当前页码值,总页数
	  var pageCurrent=
		  $("#pageId").data("pageCurrent");
	  var pageCount=
		  $("#pageId").data("pageCount");
	  //2.获取thead中checkbox的状态值
	  var flag=$("#checkAll").prop("checked");
	  //3.基于条件修改当前页码值,并重新查询
	  if(pageCurrent==pageCount&&pageCurrent>1&&flag){
		pageCurrent--; 
		$("#pageId").data("pageCurrent",pageCurrent);
	  }
	  //假如查询文本框中有数据,则清空文本框数据
	  $("#searchNameId").val("");
	  doGetObjects();
   }
   
   function doQueryObjects(){
	   //1.初始化当前页码值(每次从1开始)
	   $("#pageId").data("pageCurrent",1);
	   //2.执行查询
	   doGetObjects();
   }
   //异步查询日志信息
   function doGetObjects(){
	   //初始化全选checkbox对象的状态
	   $("#checkAll").prop("checked",false);
	   //1.定义请求参数
	   //var params="pageCurrent=1";
	   var pageCurrent=$("#pageId").data("pageCurrent");
	   if(!pageCurrent)pageCurrent=1;
	   var params={"pageCurrent":pageCurrent};//json格式的js对象
	   //查询时获取用户名
	   var uname=$("#searchNameId").val();
	   if(uname){
	     params.username=uname;//参数名必须与控制层参数一致
	   }
	   //2.定义请求url
	   var url="log/doFindPageObjects"
	   //3.发送异步请求,然后处理响应结果
	   //getJSON为JQUERY中的一个异步GET请求函数
	   //语法:getJSON(url,[params],[callback])
	   $.getJSON(url,params,doHandleResponseResult);
   }
   //处理响应结果(两种请求:正常,异常)
   function doHandleResponseResult(result){//JsonResult
	   //debugger
	   if(result.state==1){//ok
		 //1.更能页面上tbody位置的数据(日志信息)
		 doSetTableBodyRows(result.data.records);
		 //2.更新页面pageId位置的数据(分页信息)
		 doSetPagination(result.data);//pageObject
	   }else{//error
		  alert(result.message);
	   }
   }
   //将服务端响应的日志信息,更新到tbody中
   function doSetTableBodyRows(records){
	    //1.获取tbody对象,并清空原有内容
	    var tBody=$("#tbodyId");
	    tBody.empty();//jquery中清空数据的函数
	    //2.迭代records记录,然后将其追加到tBody中
	    for(var i=0;i<records.length;i++){//循环一次取一行
	    	//1)构建tr对象
	    	var tr=$("<tr></tr>")
	    	//2)构建多个td对象
	    	var tds=doCreateTds(records[i]);
	    	//3)将td对象追加到tr中
	    	tr.append(tds);
	    	//4)将tr对象追加到tbody中
	    	tBody.append(tr);
	    }
   }
   function doCreateTds(data){
	   var tds="<td><input type='checkbox' class='cBox' name='cItem' value='"+data.id+"'></td>"+
		   	 "<td>"+data.username+"</td>"+
		     "<td>"+data.operation+"</td>"+
		     "<td>"+data.method+"</td>"+
		     "<td>"+data.params+"</td>"+
		     "<td>"+data.ip+"</td>"+
		     "<td>"+data.time+"</td>";	   
       return tds;
   }

//JS排错(console.log,debugger,排除法)
</script><!-- jquery,vue,react -->





